<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>网站技术分享</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/ztjy-technology/favicon.ico">
    <meta name="description" content="">
    
    <link rel="preload" href="/ztjy-technology/assets/css/0.styles.342aeebf.css" as="style"><link rel="preload" href="/ztjy-technology/assets/js/app.ec27be4d.js" as="script"><link rel="preload" href="/ztjy-technology/assets/js/2.98a51c7c.js" as="script"><link rel="preload" href="/ztjy-technology/assets/js/7.5886c06f.js" as="script"><link rel="prefetch" href="/ztjy-technology/assets/js/3.f94f03dc.js"><link rel="prefetch" href="/ztjy-technology/assets/js/4.e44f57a3.js"><link rel="prefetch" href="/ztjy-technology/assets/js/5.65aa5b3a.js"><link rel="prefetch" href="/ztjy-technology/assets/js/6.c9f44ce5.js"><link rel="prefetch" href="/ztjy-technology/assets/js/8.6a311f92.js"><link rel="prefetch" href="/ztjy-technology/assets/js/9.5bd259cf.js">
    <link rel="stylesheet" href="/ztjy-technology/assets/css/0.styles.342aeebf.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/ztjy-technology/" aria-current="page" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">网站技术分享</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="html&amp;css" class="dropdown-title"><span class="title">html&amp;css</span> <span class="arrow down"></span></button> <button type="button" aria-label="html&amp;css" class="mobile-dropdown-title"><span class="title">html&amp;css</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/Carousel/" class="nav-link">
  如何设计实现无缝轮播
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/dialog/" class="nav-link">
  实现一个 Dialog 类）
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/BFC/" class="nav-link">
  BFC、IFC、GFC 和 FFC
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/overflow/" class="nav-link">
  文本溢出
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="javascript" class="dropdown-title"><span class="title">javascript</span> <span class="arrow down"></span></button> <button type="button" aria-label="javascript" class="mobile-dropdown-title"><span class="title">javascript</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/js的面向对象编程/" class="nav-link">
  js的面向对象编程
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/ES5/ES6 的继承除了写法以外还有什么区别？/" class="nav-link">
  ES5/ES6 的继承除了写法以外还有什么区别？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/用深度优先思想和广度优先思想实现一个拷贝函数？/" class="nav-link">
  用深度优先思想和广度优先思想实现一个拷贝函数？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/如何实现一个 new/" class="nav-link">
  如何实现一个 new
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/js原型和原型链以及应用/" class="nav-link">
  js原型和原型链以及应用
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/js作用域提升和闭包/" class="nav-link">
  js作用域提升和闭包
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/es6中模拟map源码/" class="nav-link">
  es6中模拟map源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟call源码/" class="nav-link">
  模拟call源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟bind源码/" class="nav-link">
  模拟bind源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟apply源码/" class="nav-link">
  模拟apply源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/generator/" class="nav-link">
  generator
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/promise/" class="nav-link">
  promise 以及promise的应用 异步加载文件
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/设计并实现 Promise.race()/" class="nav-link">
  设计并实现 Promise.race()
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟实现一个 Promise.finally/" class="nav-link">
  模拟实现一个 Promise.finally
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/async await 以及优雅的错误处理/" class="nav-link">
  async await 以及优雅的错误处理
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/Async/Await 如何通过同步的方式实现异步/" class="nav-link">
  Async/Await 如何通过同步的方式实现异步
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/co模块的封装/" class="nav-link">
  co模块的封装
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/柯理化函数/" class="nav-link">
  柯理化函数
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/Object.defineProperty缺陷以及proxy/" class="nav-link">
  Object.defineProperty缺陷以及proxy
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/es7中装饰器/" class="nav-link">
  es7中装饰器
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/数组去重的八种姿势/" class="nav-link">
  数组去重的八种姿势
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/set、map、weakSet、weakMap区别/" class="nav-link">
  set、map、weakSet、weakMap区别
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/es6转换es5的实现思路/" class="nav-link">
  es6转换es5的实现思路
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/for循环和forEach性能研究/" class="nav-link">
  for循环和forEach性能研究
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/浏览器和 Node 事件循环的区别/" class="nav-link">
  浏览器和 Node 事件循环的区别
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/内存泄漏 OOM 垃圾回收机制/" class="nav-link">
  内存泄漏 OOM 垃圾回收机制
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue" class="dropdown-title"><span class="title">vue</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue" class="mobile-dropdown-title"><span class="title">vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/vue混入/" class="nav-link">
  vue混入
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/封装一个全局模态框/" class="nav-link">
  封装一个全局模态框
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Vue 的插件机制/" class="nav-link">
  Vue 的插件机制
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的/" class="nav-link">
  Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Vue 的父组件和子组件生命周期钩子执行顺序是什么/" class="nav-link">
  Vue 的父组件和子组件生命周期钩子执行顺序是什么
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。/" class="nav-link">
  Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/虚拟dom/" class="nav-link">
  虚拟dom
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？/" class="nav-link">
  写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react" class="dropdown-title"><span class="title">react</span> <span class="arrow down"></span></button> <button type="button" aria-label="react" class="mobile-dropdown-title"><span class="title">react</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/redux 为什么要把 reducer 设计成纯函数/" class="nav-link">
  redux 为什么要把 reducer 设计成纯函数
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/react-router和 a 标签有什么区别/" class="nav-link">
  react-router和 a 标签有什么区别
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？/" class="nav-link">
  为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/hooks/" class="nav-link">
  hooks
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="node" class="dropdown-title"><span class="title">node</span> <span class="arrow down"></span></button> <button type="button" aria-label="node" class="mobile-dropdown-title"><span class="title">node</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/node/npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？/" class="nav-link">
  npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/node/node中并发和多线程的理解/" class="nav-link">
  node中并发和多线程的理解
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/node/浏览器和 Node 事件循环的区别/" class="nav-link">
  浏览器和 Node 事件循环的区别
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="网络编程" class="dropdown-title"><span class="title">网络编程</span> <span class="arrow down"></span></button> <button type="button" aria-label="网络编程" class="mobile-dropdown-title"><span class="title">网络编程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/http协议 http1.0、1.1、2.0 协议的区别？/" class="nav-link">
  http协议 http1.0、1.1、2.0 协议的区别？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/Http 状态码 301 和 302 的应用场景分别是什么/" class="nav-link">
  Http 状态码 301 和 302 的应用场景分别是什么
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响/" class="nav-link">
  永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/http缓存/" class="nav-link">
  http缓存
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/介绍下前端加密的常见场景和方法/" class="nav-link">
  介绍下前端加密的常见场景和方法
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/HTTPS 中间人攻击/" class="nav-link">
  HTTPS 中间人攻击
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/接口如何防刷/" class="nav-link">
  接口如何防刷
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/浏览器缓存读取规则/" class="nav-link">
  浏览器缓存读取规则
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/websocket/" class="nav-link">
  websocket
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/TCP三次握手和四次挥手的理解/" class="nav-link">
  TCP三次握手和四次挥手的理解
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/cookie 和 token 都存放在 header 中，为什么不会劫持 token？/" class="nav-link">
  cookie 和 token 都存放在 header 中，为什么不会劫持 token？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/如何实现 token 加密/" class="nav-link">
  如何实现 token 加密
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/http2的多路复用/" class="nav-link">
  http2的多路复用
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="优化" class="dropdown-title"><span class="title">优化</span> <span class="arrow down"></span></button> <button type="button" aria-label="优化" class="mobile-dropdown-title"><span class="title">优化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/重绘和回流/" class="nav-link">
  重绘和回流
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/防抖和节流  input 搜索如何防抖，如何处理中文输入/" class="nav-link">
  防抖和节流  input 搜索如何防抖，如何处理中文输入
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/webpack打包vue速度太慢怎么解决/" class="nav-link">
  webpack打包vue速度太慢怎么解决
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/如何优化首页的加载速度？首页白屏是什么问题引起的？如何解决呢/" class="nav-link">
  如何优化首页的加载速度？首页白屏是什么问题引起的？如何解决呢
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/vue 渲染大量数据时应该怎么优化？/" class="nav-link">
  vue 渲染大量数据时应该怎么优化？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的/" class="nav-link">
  webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/文档工具/" class="nav-link">
  文档工具
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/git的workflow/" class="nav-link">
  git的workflow
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/接口测试工具/" class="nav-link">
  接口测试工具
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/敏捷开发工具/" class="nav-link">
  敏捷开发工具
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/线上bug的解决姿势/" class="nav-link">
  线上bug的解决姿势
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/ts的环境搭建/" class="nav-link">
  ts的环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/Nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多端开发" class="dropdown-title"><span class="title">多端开发</span> <span class="arrow down"></span></button> <button type="button" aria-label="多端开发" class="mobile-dropdown-title"><span class="title">多端开发</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/andorid和js的交互/" class="nav-link">
  andorid和js的交互
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/flutter/" class="nav-link">
  flutter
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/react-native/" class="nav-link">
  react-native
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试题" class="dropdown-title"><span class="title">面试题</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试题" class="mobile-dropdown-title"><span class="title">面试题</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/实现模糊搜索结果的关键词高亮显示/" class="nav-link">
  实现模糊搜索结果的关键词高亮显示
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度/" class="nav-link">
  实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/已知数据格式，实现一个函数 fn 找出链条中所有的父级 id/" class="nav-link">
  已知数据格式，实现一个函数 fn 找出链条中所有的父级 id
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/移动端 Retina 屏 1px 像素问题/" class="nav-link">
  移动端 Retina 屏 1px 像素问题
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/算法题之移动零/" class="nav-link">
  算法题之移动零
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况/" class="nav-link">
  模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？/" class="nav-link">
  为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/算法题「旋转数组」/" class="nav-link">
  算法题「旋转数组」
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/两个数组合并成一个数组/" class="nav-link">
  两个数组合并成一个数组
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/a.b.c.d` 和 a[&quot;b&quot;][&quot;c&quot;][&quot;d&quot;]，哪个性能更高？/" class="nav-link">
  a.b.c.d 和 a[&quot;b&quot;][&quot;c&quot;][&quot;d&quot;]，哪个性能更高？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/实现一个 sleep 函数/" class="nav-link">
  实现一个 sleep 函数
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/如何把一个字符串的大小写取反（大写变小写小写变大写），例如 &quot;AbC&quot; 变成 &quot;aBc&quot; 。/" class="nav-link">
  如何把一个字符串的大小写取反（大写变小写小写变大写），例如 &quot;AbC&quot; 变成 &quot;aBc&quot; 。
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="html&amp;css" class="dropdown-title"><span class="title">html&amp;css</span> <span class="arrow down"></span></button> <button type="button" aria-label="html&amp;css" class="mobile-dropdown-title"><span class="title">html&amp;css</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/Carousel/" class="nav-link">
  如何设计实现无缝轮播
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/dialog/" class="nav-link">
  实现一个 Dialog 类）
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/BFC/" class="nav-link">
  BFC、IFC、GFC 和 FFC
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/html/overflow/" class="nav-link">
  文本溢出
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="javascript" class="dropdown-title"><span class="title">javascript</span> <span class="arrow down"></span></button> <button type="button" aria-label="javascript" class="mobile-dropdown-title"><span class="title">javascript</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/js的面向对象编程/" class="nav-link">
  js的面向对象编程
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/ES5/ES6 的继承除了写法以外还有什么区别？/" class="nav-link">
  ES5/ES6 的继承除了写法以外还有什么区别？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/用深度优先思想和广度优先思想实现一个拷贝函数？/" class="nav-link">
  用深度优先思想和广度优先思想实现一个拷贝函数？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/如何实现一个 new/" class="nav-link">
  如何实现一个 new
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/js原型和原型链以及应用/" class="nav-link">
  js原型和原型链以及应用
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/js作用域提升和闭包/" class="nav-link">
  js作用域提升和闭包
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/es6中模拟map源码/" class="nav-link">
  es6中模拟map源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟call源码/" class="nav-link">
  模拟call源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟bind源码/" class="nav-link">
  模拟bind源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟apply源码/" class="nav-link">
  模拟apply源码
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/generator/" class="nav-link">
  generator
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/promise/" class="nav-link">
  promise 以及promise的应用 异步加载文件
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/设计并实现 Promise.race()/" class="nav-link">
  设计并实现 Promise.race()
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/模拟实现一个 Promise.finally/" class="nav-link">
  模拟实现一个 Promise.finally
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/async await 以及优雅的错误处理/" class="nav-link">
  async await 以及优雅的错误处理
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/Async/Await 如何通过同步的方式实现异步/" class="nav-link">
  Async/Await 如何通过同步的方式实现异步
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/co模块的封装/" class="nav-link">
  co模块的封装
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/柯理化函数/" class="nav-link">
  柯理化函数
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/Object.defineProperty缺陷以及proxy/" class="nav-link">
  Object.defineProperty缺陷以及proxy
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/es7中装饰器/" class="nav-link">
  es7中装饰器
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/数组去重的八种姿势/" class="nav-link">
  数组去重的八种姿势
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/set、map、weakSet、weakMap区别/" class="nav-link">
  set、map、weakSet、weakMap区别
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/es6转换es5的实现思路/" class="nav-link">
  es6转换es5的实现思路
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/for循环和forEach性能研究/" class="nav-link">
  for循环和forEach性能研究
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/浏览器和 Node 事件循环的区别/" class="nav-link">
  浏览器和 Node 事件循环的区别
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/js/内存泄漏 OOM 垃圾回收机制/" class="nav-link">
  内存泄漏 OOM 垃圾回收机制
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue" class="dropdown-title"><span class="title">vue</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue" class="mobile-dropdown-title"><span class="title">vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/vue混入/" class="nav-link">
  vue混入
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/封装一个全局模态框/" class="nav-link">
  封装一个全局模态框
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Vue 的插件机制/" class="nav-link">
  Vue 的插件机制
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的/" class="nav-link">
  Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Vue 的父组件和子组件生命周期钩子执行顺序是什么/" class="nav-link">
  Vue 的父组件和子组件生命周期钩子执行顺序是什么
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。/" class="nav-link">
  Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/虚拟dom/" class="nav-link">
  虚拟dom
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/vue/写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？/" class="nav-link">
  写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="react" class="dropdown-title"><span class="title">react</span> <span class="arrow down"></span></button> <button type="button" aria-label="react" class="mobile-dropdown-title"><span class="title">react</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/redux 为什么要把 reducer 设计成纯函数/" class="nav-link">
  redux 为什么要把 reducer 设计成纯函数
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/react-router和 a 标签有什么区别/" class="nav-link">
  react-router和 a 标签有什么区别
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？/" class="nav-link">
  为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/react/hooks/" class="nav-link">
  hooks
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="node" class="dropdown-title"><span class="title">node</span> <span class="arrow down"></span></button> <button type="button" aria-label="node" class="mobile-dropdown-title"><span class="title">node</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/node/npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？/" class="nav-link">
  npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/node/node中并发和多线程的理解/" class="nav-link">
  node中并发和多线程的理解
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/node/浏览器和 Node 事件循环的区别/" class="nav-link">
  浏览器和 Node 事件循环的区别
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="网络编程" class="dropdown-title"><span class="title">网络编程</span> <span class="arrow down"></span></button> <button type="button" aria-label="网络编程" class="mobile-dropdown-title"><span class="title">网络编程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/http协议 http1.0、1.1、2.0 协议的区别？/" class="nav-link">
  http协议 http1.0、1.1、2.0 协议的区别？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/Http 状态码 301 和 302 的应用场景分别是什么/" class="nav-link">
  Http 状态码 301 和 302 的应用场景分别是什么
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响/" class="nav-link">
  永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/http缓存/" class="nav-link">
  http缓存
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/介绍下前端加密的常见场景和方法/" class="nav-link">
  介绍下前端加密的常见场景和方法
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/HTTPS 中间人攻击/" class="nav-link">
  HTTPS 中间人攻击
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/接口如何防刷/" class="nav-link">
  接口如何防刷
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/浏览器缓存读取规则/" class="nav-link">
  浏览器缓存读取规则
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/websocket/" class="nav-link">
  websocket
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/TCP三次握手和四次挥手的理解/" class="nav-link">
  TCP三次握手和四次挥手的理解
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/cookie 和 token 都存放在 header 中，为什么不会劫持 token？/" class="nav-link">
  cookie 和 token 都存放在 header 中，为什么不会劫持 token？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/如何实现 token 加密/" class="nav-link">
  如何实现 token 加密
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/http/http2的多路复用/" class="nav-link">
  http2的多路复用
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="优化" class="dropdown-title"><span class="title">优化</span> <span class="arrow down"></span></button> <button type="button" aria-label="优化" class="mobile-dropdown-title"><span class="title">优化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/重绘和回流/" class="nav-link">
  重绘和回流
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/防抖和节流  input 搜索如何防抖，如何处理中文输入/" class="nav-link">
  防抖和节流  input 搜索如何防抖，如何处理中文输入
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/webpack打包vue速度太慢怎么解决/" class="nav-link">
  webpack打包vue速度太慢怎么解决
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/如何优化首页的加载速度？首页白屏是什么问题引起的？如何解决呢/" class="nav-link">
  如何优化首页的加载速度？首页白屏是什么问题引起的？如何解决呢
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/vue 渲染大量数据时应该怎么优化？/" class="nav-link">
  vue 渲染大量数据时应该怎么优化？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/optimization/webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的/" class="nav-link">
  webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/文档工具/" class="nav-link">
  文档工具
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/git的workflow/" class="nav-link">
  git的workflow
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/接口测试工具/" class="nav-link">
  接口测试工具
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/敏捷开发工具/" class="nav-link">
  敏捷开发工具
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/线上bug的解决姿势/" class="nav-link">
  线上bug的解决姿势
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/ts的环境搭建/" class="nav-link">
  ts的环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/Nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="多端开发" class="dropdown-title"><span class="title">多端开发</span> <span class="arrow down"></span></button> <button type="button" aria-label="多端开发" class="mobile-dropdown-title"><span class="title">多端开发</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/andorid和js的交互/" class="nav-link">
  andorid和js的交互
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/flutter/" class="nav-link">
  flutter
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/engineering/react-native/" class="nav-link">
  react-native
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试题" class="dropdown-title"><span class="title">面试题</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试题" class="mobile-dropdown-title"><span class="title">面试题</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/实现模糊搜索结果的关键词高亮显示/" class="nav-link">
  实现模糊搜索结果的关键词高亮显示
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度/" class="nav-link">
  实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/已知数据格式，实现一个函数 fn 找出链条中所有的父级 id/" class="nav-link">
  已知数据格式，实现一个函数 fn 找出链条中所有的父级 id
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/移动端 Retina 屏 1px 像素问题/" class="nav-link">
  移动端 Retina 屏 1px 像素问题
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/算法题之移动零/" class="nav-link">
  算法题之移动零
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况/" class="nav-link">
  模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？/" class="nav-link">
  为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/算法题「旋转数组」/" class="nav-link">
  算法题「旋转数组」
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/两个数组合并成一个数组/" class="nav-link">
  两个数组合并成一个数组
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/a.b.c.d` 和 a[&quot;b&quot;][&quot;c&quot;][&quot;d&quot;]，哪个性能更高？/" class="nav-link">
  a.b.c.d 和 a[&quot;b&quot;][&quot;c&quot;][&quot;d&quot;]，哪个性能更高？
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/实现一个 sleep 函数/" class="nav-link">
  实现一个 sleep 函数
</a></li><li class="dropdown-item"><!----> <a href="/ztjy-technology/interview/如何把一个字符串的大小写取反（大写变小写小写变大写），例如 &quot;AbC&quot; 变成 &quot;aBc&quot; 。/" class="nav-link">
  如何把一个字符串的大小写取反（大写变小写小写变大写），例如 &quot;AbC&quot; 变成 &quot;aBc&quot; 。
</a></li></ul></div></div> <!----></nav>  <!----> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/ztjy-technology/favicon.ico" alt="hero"> <h1 id="main-title">
      网站技术分享
    </h1> <p class="description">
      Welcome to your VuePress site
    </p> <p class="action"><a href="/ztjy-technology/index/" class="nav-link action-button">
  点击进入 →
</a></p></header> <!----> <div class="theme-default-content custom content__default"></div> <div class="footer">
    MIT Licensed | Copyright © 2020-present Bing Yu
  </div></main></div><div class="global-ui"></div></div>
    <script src="/ztjy-technology/assets/js/app.ec27be4d.js" defer></script><script src="/ztjy-technology/assets/js/2.98a51c7c.js" defer></script><script src="/ztjy-technology/assets/js/7.5886c06f.js" defer></script>
  </body>
</html>
